Layers panel/jan26 updates shorterm #272

Arbyhisenaj · 2026-01-15T13:13:10Z

-add/remove layers

consolidated members and markers
updated icons
Custom colours for categories
Empty state button for adding layers
more legible legend when showing a long list of categories (e.g parties with the voteshare data)

Description

Motivation and Context

How Can It Be Tested?

How Will This Be Deployed?

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

I've checked the spec (e.g. Figma file) and documented any divergences.
My code follows the code style of this project.
My code follows the code style of this project.
My change requires a change to the documentation.
I've updated the documentation accordingly.
Replace unused checkboxes with bullet points.

joaquimds · 2026-01-15T15:08:05Z

src/app/map/[id]/components/controls/BoundariesControl/BoundariesControl.tsx

          {/* Potentially could be restored. Remove if still not restored by 2025-03-01 */}
          {/* <ShapeSelector />
          <Separator />
          <FillSelector /> */}


suggestion: remove this

Copilot

Pull request overview

This PR enhances the layers panel with comprehensive updates to improve user experience when managing map layers, markers, and data visualizations.

Changes:

Consolidated members and markers into a unified markers control panel
Added custom color picker for categorical data visualization
Implemented context menus for renaming, hiding, and deleting layers/markers/turfs/data sources
Replaced hover menus with right-click context menus for better UX
Added empty state buttons for adding layers with dropdown options
Improved legend display for categorical data with color swatches
Added column filtering UI for "highest value" visualizations
Updated icon library (lucide-react) and replaced custom VectorSquare icon

Reviewed changes

Copilot reviewed 33 out of 34 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
src/server/trpc/routers/dataSource.ts	Added name field to update and conditional import triggering
src/server/stats/index.ts	Added includeColumns parameter with column filtering logic and float casting
src/server/models/MapView.ts	Added categoryColors and includeColumnsString schema fields
src/components/DeleteConfirmationDialog.tsx	New reusable delete confirmation dialog component
src/app/map/[id]/hooks/useLayers.ts	Added marker visibility handling logic
src/app/map/[id]/components/controls/MarkersControl/*	Refactored to use context menus and added delete confirmations
src/app/map/[id]/components/controls/TurfsControl/*	Replaced hover menus with context menus
src/app/map/[id]/components/controls/DataSourceItem.tsx	Added inline renaming and context menu actions
src/app/map/[id]/components/controls/LayerEmptyMessage.tsx	Enhanced with button mode and dropdown support
src/app/map/[id]/components/controls/VisualisationPanel/*	Added IncludeColumnsModal and CategoryColorEditor
src/app/map/[id]/components/Legend.tsx	Redesigned with category swatches and visibility toggle
src/app/map/[id]/colors.ts	Added categoryColors support for custom categorical colors
src/components/icons/VectorSquare.tsx	Removed custom icon (replaced with lucide-react)
package.json	Updated lucide-react from 0.484.0 to 0.562.0

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-15T15:12:04Z

src/server/stats/index.ts

+    .filter(({ name, type }) => {
+      // Must be a number column
+      if (type !== ColumnType.Number) return false;
+
+      // If includeColumns is specified, only include those columns
+      if (includeColumns && includeColumns.length > 0) {
+        return includeColumns.includes(name);
+      }
+
+      // Otherwise, exclude columns in excludeColumns list
+      return !excludeColumns.includes(name);
+    })


When includeColumns is specified with length > 0, the excludeColumns list is completely ignored. This could lead to unexpected behavior if a user expects both include and exclude to work together. Consider either documenting this behavior clearly or handling the case where both are provided (e.g., by applying excludeColumns as a filter after includeColumns).

Copilot · 2026-01-15T15:12:05Z

package.json

    "kysely": "^0.27.6",
    "lucide": "^0.544.0",
-    "lucide-react": "^0.484.0",
+    "lucide-react": "^0.562.0",


The lucide-react package is being updated from version 0.484.0 to 0.562.0. This is a significant jump that may introduce breaking changes or new icons (like VectorSquareIcon which is being used in this PR). Ensure that all icon imports are compatible with the new version and check the lucide-react changelog for any breaking changes.

src/app/map/[id]/components/Legend.tsx

Copilot · 2026-01-15T15:12:06Z

src/server/trpc/routers/dataSource.ts

+        typeof input.autoEnrich === "boolean" ||
+        typeof input.autoImport === "boolean";


The condition for checking if autoEnrich and autoImport have changed uses typeof to check if they're boolean, but this doesn't verify if the values actually changed from their previous state. This means any update that includes these fields (even if unchanged) will trigger a re-import. Consider comparing against the previous values to only trigger import when there's an actual change.

Copilot · 2026-01-15T15:12:06Z

src/app/map/[id]/components/controls/VisualisationPanel/VisualisationPanel.tsx

+          <p className="text-sm text-gray-500 mb-4">
+            Only selected columns will be considered when determining the
+            highest value column for each area. Leave empty to use all numeric
+            columns.


The IncludeColumnsModal description states "Leave empty to use all numeric columns", but this conflicts with the actual behavior where an empty includeColumns results in using all columns except those in excludeColumns. The UI text should be updated to clarify that when no columns are selected, the excludeColumns filter is applied instead.

src/components/DeleteConfirmationDialog.tsx

Copilot · 2026-01-15T15:12:08Z

src/app/map/[id]/components/controls/MarkersControl/MarkersControl.tsx

+        enableVisibilityToggle={Boolean(
+          placedMarkers.length > 0 ||
+            markerDataSources.length > 0 ||
+            membersDataSource,
+        )}


The condition checking if the layer should be enabled uses Boolean(placedMarkers.length > 0 || ...) which is redundant since the expression already evaluates to a boolean. The outer Boolean() call is unnecessary and can be removed for cleaner code.

Suggested change

enableVisibilityToggle={Boolean(

placedMarkers.length > 0 ||

markerDataSources.length > 0 ||

membersDataSource,

)}

enableVisibilityToggle={

placedMarkers.length > 0 ||

markerDataSources.length > 0 ||

membersDataSource

}

Copilot · 2026-01-15T15:12:08Z

src/app/map/[id]/components/Choropleth/index.tsx

        >
          {/* Fill Layer - only show for choropleth */}
          <Layer
+            key={`${sourceId}-fill-${viewConfig.areaDataColumn}-${viewConfig.calculationType}-${viewConfig.colorScheme}`}


The Layer key includes categoryColors in its dependencies via viewConfig.categoryColors, but categoryColors is an object/record. Since the key is a string template, changes to categoryColors won't be reflected in the key and the layer won't re-render when category colors change. Consider adding a serialized version of categoryColors to the key or using a different approach to force layer updates when colors change.

Copilot · 2026-01-15T15:12:08Z

src/app/map/[id]/components/controls/LayerEmptyMessage.tsx

+  if (dropdownItems) {
+    return (
+      <MultiDropdownMenu
+        dropdownLabel="Marker options"


The dropdownLabel is hardcoded to "Marker options" in the AddLayerButton component, but this component is used for different layer types (turfs, boundaries, markers). This makes the dropdown label incorrect when used with non-marker layers. Consider making dropdownLabel a parameter or deriving it from the context.

Copilot · 2026-01-15T15:12:09Z

src/server/trpc/routers/dataSource.ts

+      const configFieldsChanged =
+        input.columnRoles !== undefined ||
+        input.enrichments !== undefined ||
+        input.geocodingConfig !== undefined ||
+        input.dateFormat !== undefined ||
+        input.public !== undefined ||
+        typeof input.autoEnrich === "boolean" ||
+        typeof input.autoImport === "boolean";


The condition configFieldsChanged checks if fields are !== undefined, but this means passing undefined explicitly won't trigger a re-import, while passing null or any other value will. This could lead to confusing behavior. Consider using in operator to check if the property exists in the input object, or be more explicit about what constitutes a change.

joaquimds · 2026-01-15T15:19:47Z

src/server/trpc/routers/dataSource.ts

+        typeof input.autoEnrich === "boolean" ||
+        typeof input.autoImport === "boolean";
+
+      if (configFieldsChanged) {


note: remove public, autoenrich, autoimport from the check here

joaquimds · 2026-01-15T15:20:02Z

src/server/trpc/routers/area.ts

        column: z.string(),
        secondaryColumn: z.string().optional(),
        excludeColumns: z.array(z.string()),
+        includeColumns: z.array(z.string()).optional().nullable(),


note: remove excludeColumns

Co-authored-by: Copilot <[email protected]>

…com/commonknowledge/ts-mapped into layers-panel/jan26-updates-shorterm

…dColorEditor.tsx Co-authored-by: Copilot <[email protected]>

…isationPanel.tsx Co-authored-by: Copilot <[email protected]>

…dColorEditor.tsx Co-authored-by: Copilot <[email protected]>

…isationPanel.tsx Co-authored-by: Copilot <[email protected]>

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

…com/commonknowledge/ts-mapped into layers-panel/jan26-updates-shorterm

…shorterm

…onknowledge/ts-mapped into layers-panel/jan26-updates-shorterm

Copilot

Pull request overview

Copilot reviewed 41 out of 42 changed files in this pull request and generated 7 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-16T15:43:09Z

src/server/trpc/routers/dataSource.ts

+      const configFieldsChanged =
+        input.columnRoles !== undefined ||
+        input.enrichments !== undefined ||
+        input.geocodingConfig !== undefined ||
+        input.dateFormat !== undefined;
+
+      if (configFieldsChanged) {
+        await enqueue("importDataSource", ctx.dataSource.id, {
+          dataSourceId: ctx.dataSource.id,
+        });
+      }


The logic check for configFieldsChanged only checks if the fields are not undefined, but doesn't verify if they've actually changed from their previous values. This means that even if a user updates the name and then clicks save without changing config fields, but the config fields happen to be defined, the import will not be triggered. Consider comparing the new values with existing values to determine if a re-import is truly necessary.

Copilot · 2026-01-16T15:43:09Z

src/app/map/[id]/components/Choropleth/useChoroplethFeatureStatesEffect.ts

+        map.setFeatureState(
+          {
+            source: sourceId,
+            sourceLayer: layerId,
+            id: areaCode,
+          },
+          { value: null, secondaryValue: null },
+        );


The function removeFeatureState has been changed to setFeatureState with null values. While this should work, verify that this is the intended behavior change. The comment says "Remove lingering feature states" but the implementation now sets them to null rather than removing them. Ensure this doesn't cause any unexpected behavior with Mapbox GL.

Copilot · 2026-01-16T15:43:09Z

src/app/map/[id]/components/Choropleth/areas.ts

 ): AreaSetGroupCode[] => {
  if (!dataSourceGeocodingConfig) {
-    return [];
+    return Object.values(AreaSetGroupCode);


When no geocoding config is provided, the function now returns all AreaSetGroupCodes instead of an empty array. This is a significant behavior change that could allow users to select area sets that aren't compatible with their data source. This might lead to incorrect visualizations or errors when geocoding is attempted. Verify this change is intentional and that there are proper safeguards elsewhere in the code.

Suggested change

return Object.values(AreaSetGroupCode);

return [];

Copilot · 2026-01-16T15:43:10Z

src/app/map/[id]/components/controls/TurfsControl/TurfItem.tsx

+                className="flex items-center gap-2 w-full min-h-full p-1 rounded transition-colors hover:bg-neutral-100 text-left cursor-pointer"
+                onClick={() => handleFlyTo(turf)}


The styling classes use forward slashes (/) as separators which is unusual and might not be valid Tailwind CSS syntax. For example: "flex items-center gap-2 / w-full min-h-full p-1 rounded / transition-colors hover:bg-neutral-100 / text-left cursor-pointer". This should use spaces only. Verify if this is intentional or if these are typos that could cause styling issues.

Copilot · 2026-01-16T15:43:10Z

src/app/map/[id]/components/controls/MarkersControl/SortableFolderItem.tsx

+                ref={isDraggingMarker ? setHeaderNodeRef : null}
+                onClick={() => onClickFolder()}
+                className={cn(
+                  "flex items-center gap-1 / w-full min-h-full p-1 rounded / transition-colors hover:bg-neutral-100 / text-left cursor-pointer",


Similar issue with forward slashes in className strings that appear to be separators. These should be removed as they're not valid Tailwind CSS syntax: "flex items-center gap-1 / w-full min-h-full p-1 rounded / transition-colors hover:bg-neutral-100 / text-left cursor-pointer". This pattern appears in multiple places and should be cleaned up.

Suggested change

"flex items-center gap-1 / w-full min-h-full p-1 rounded / transition-colors hover:bg-neutral-100 / text-left cursor-pointer",

"flex items-center gap-1 w-full min-h-full p-1 rounded transition-colors hover:bg-neutral-100 text-left cursor-pointer",

Copilot · 2026-01-16T15:43:10Z

src/app/map/[id]/components/MapMarkerAndAreaControls.tsx

@@ -1,5 +1,4 @@
-import { ChartBar, MapPin } from "lucide-react";
-import VectorSquare from "@/components/icons/VectorSquare";
+import { ChartBar, MapPin, VectorSquareIcon } from "lucide-react";


The VectorSquareIcon icon may not exist in lucide-react. The PR updates lucide-react to version 0.562.0, and while this version exists, VectorSquareIcon might not be the correct icon name. In the previous code, a custom VectorSquare component was used. Please verify that VectorSquareIcon is a valid icon in lucide-react 0.562.0, otherwise this will cause a runtime error.

Copilot · 2026-01-16T15:43:11Z

src/app/map/[id]/components/LayerTypeIcon.tsx

-  MapPinIcon,
-  SquareIcon,
  UsersIcon,
+  VectorSquareIcon,


The VectorSquareIcon may not exist in lucide-react. A similar issue exists here where the code references VectorSquareIcon from lucide-react. Please verify this is a valid icon name in version 0.562.0, or use the correct icon name to avoid runtime errors.

Arbyhisenaj added 9 commits January 14, 2026 13:31

cp1-context-menu

fe1c48e

cp2-consolidating members and markers

cbdfbb5

cp3-icon-change

bd36727

linear changes

6505021

better categories data viz

6746385

centered areainfo

f756155

empty state + delete layer item alert dialogue component

4ba8773

legend upgrade

565ced9

lint fixes

d36e62c

joaquimds requested a review from Copilot January 15, 2026 15:04

Copilot started reviewing on behalf of joaquimds January 15, 2026 15:04 View session

joaquimds reviewed Jan 15, 2026

View reviewed changes

Copilot AI reviewed Jan 15, 2026

View reviewed changes

joaquimds reviewed Jan 15, 2026

View reviewed changes

joaquimds and others added 10 commits January 15, 2026 16:21

Update src/app/map/[id]/components/Legend.tsx

b477574

Co-authored-by: Copilot <[email protected]>

Update src/components/DeleteConfirmationDialog.tsx

fe0f0f2

Co-authored-by: Copilot <[email protected]>

move bivariate button plus other fixes

7ba1278

Merge branch 'layers-panel/jan26-updates-shorterm' of https://github.…

0882d15

…com/commonknowledge/ts-mapped into layers-panel/jan26-updates-shorterm

Merge branch 'main' into feat/layers-panel-one

239e9cd

Merge branch 'main' into feat/layers-panel-one

5f7fa16

Update src/app/map/[id]/components/controls/VisualisationPanel/Steppe…

275e118

…dColorEditor.tsx Co-authored-by: Copilot <[email protected]>

Update src/app/map/[id]/components/controls/VisualisationPanel/Visual…

9b1e7d8

…isationPanel.tsx Co-authored-by: Copilot <[email protected]>

Update src/app/map/[id]/components/controls/VisualisationPanel/Steppe…

f68e8e1

…dColorEditor.tsx Co-authored-by: Copilot <[email protected]>

Update src/app/map/[id]/components/controls/VisualisationPanel/Visual…

d9511a9

…isationPanel.tsx Co-authored-by: Copilot <[email protected]>

Copilot AI reviewed Jan 15, 2026

View reviewed changes

Arbyhisenaj and others added 4 commits January 15, 2026 16:39

stepped colours performance fix and rounded numbers

fe25082

Merge branch 'layers-panel/jan26-updates-shorterm' of https://github.…

c167f7d

…com/commonknowledge/ts-mapped into layers-panel/jan26-updates-shorterm

column 1 & 2 fix

c6135c9

Merge branch 'feat/layers-panel-one' into layers-panel/jan26-updates-…

0c978e2

…shorterm

joaquimds added 2 commits January 16, 2026 15:25

fix: various choropleth bugs

17a647a

Merge branch 'layers-panel/jan26-updates-shorterm' of github.com:comm…

47aadac

…onknowledge/ts-mapped into layers-panel/jan26-updates-shorterm

joaquimds requested a review from Copilot January 16, 2026 15:39

Copilot started reviewing on behalf of joaquimds January 16, 2026 15:39 View session

Copilot AI reviewed Jan 16, 2026

View reviewed changes

joaquimds merged commit 1d0920b into main Jan 19, 2026
7 checks passed

joaquimds deleted the layers-panel/jan26-updates-shorterm branch January 19, 2026 10:12

		typeof input.autoEnrich === "boolean" \|\|
		typeof input.autoImport === "boolean";

		className="flex items-center gap-2 w-full min-h-full p-1 rounded transition-colors hover:bg-neutral-100 text-left cursor-pointer"
		onClick={() => handleFlyTo(turf)}

	"flex items-center gap-1 / w-full min-h-full p-1 rounded / transition-colors hover:bg-neutral-100 / text-left cursor-pointer",
	"flex items-center gap-1 w-full min-h-full p-1 rounded transition-colors hover:bg-neutral-100 text-left cursor-pointer",

Uh oh!

Layers panel/jan26 updates shorterm #272

Layers panel/jan26 updates shorterm #272

Uh oh!

Conversation

Arbyhisenaj commented Jan 15, 2026

Description

Motivation and Context

How Can It Be Tested?

How Will This Be Deployed?

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

joaquimds Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

joaquimds Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

joaquimds Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 16, 2026